<!--
 * @Author: zhangjingyu
 * @Date: 2020-11-03 16:25:23
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-08 10:00:13
 * @FilePath: \vprisk10.14\src\views\PublicManage\publicManage\caliberManage\components\ruleDef.vue
 * @Description: 规则定义项新增/编辑弹窗组件
-->

<template>
  <div>
    <el-row :gutter="10" style="display:flex">
      <!-- 左侧维度选择 -->
      <el-col :span="5" class="leftDtf">
        <el-collapse v-model="activeName" >
          <el-collapse-item title="内置维度" name="1">
            <template slot="title">
              <h6>内置维度</h6>
            </template>
            <div class="left-item"
              v-for="item in builtInList"
              :key="item.id"
              @dblclick="addDef(item)"
              :title="item.text"
            >
             <i class="el-icon-menu"></i> {{ item.text }}
            </div>
          </el-collapse-item>
          <el-collapse-item title="自定义维度" name="2">
            <template slot="title">
              <h6>自定义维度</h6>
            </template>
            <div class="left-item"
              v-for="item in selfList"
              :key="item.id"
              @dblclick="addDef(item)"
              :title="item.text"
            >
              <i class="el-icon-menu"></i>{{ item.text }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
      <!-- 右侧表格 -->
      <el-col :span="19" class="rightDtf" style="height:100%">
        <!-- 表头 -->
        <el-row class="defHeader">
          <el-col :span="2">关系</el-col>
          <el-col :span="4">维度</el-col>
          <el-col :span="4">运算符</el-col>
          <el-col :span="6">层级方案</el-col>
          <el-col :span="6">选择范围</el-col>
          <el-col :span="2">操作</el-col>
        </el-row>
        <!-- 表体 -->
        <el-row class="defBody">
          <!-- 循环的每行 -->
          <el-row v-for="(item, i) in dataList" :key="i" style="display:flex;border-bottom:1px solid #eceef5">
            <el-col :span="2" class="_and">{{ i == 0 ? "　　" : "并且" }}</el-col>
            <el-col :span="4" class="longName" :title="item.rullDictName">
              <span style="color:red">*</span>{{ item.rullDictName }}
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="dataList[i].conditionFlag"
                placeholder="请选择"
              >
                <el-option value="in" label="包含"></el-option>
                <el-option value="not in" label="不包含"></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select
                v-model="dataList[i].rullAllVal"
                placeholder="请选择"
                @change="selectChange"
              >
                <el-option
                  v-for="itemA in selectAll['list' + item.rullDictCode]"
                  :key="itemA.treetypeCode"
                  :label="itemA.treetypeName"
                  :value="itemA.treetypeCode"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-cascader
                clearable
                filterable
                :options="treeAll['tree' + item.rullAllVal]"
                v-model="dataList[i].rullVal"
                :props="{
                  checkStrictly: true,
                  emitPath: false,
                  expendTrigger: 'hover',
                  value: 'dictItemCode',
                  label: 'dictItemName'
                }"
                :show-all-levels="false"
                :ref="'saveTree'"
                @change="checkFormOrg(i)"
              ></el-cascader>
            </el-col>
            <el-col :span="2">
              <i class="el-icon-delete delRow" @click="delDef(i, dataList)"></i>
            </el-col>
          </el-row>
        </el-row>
        <h4 class="tip">*双击左侧维度添加公式</h4>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { publicManage_pub } from "@/api/index";
import { getDict } from "@/api/getDict";
export default {
  name: "ruleDef",
  data() {
    return {
      activeName: "1",
      // 内置维度
      builtInList: [],
      // 自定义维度
      selfList: [],
    
      // 所有下拉
      selectAll: {},
      // 所有树
      treeAll: {}
    };
  },
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  created() {
    this.queryDimDictType();
    this.getDict();
    // 层级方案下拉和tree
    this.getAllSelectOrTree();
  },
  watch: {
    dataList() {
      this.getAllSelectOrTree();
    }
  },
  methods: {
    getDict() {
      getDict("cpm_caliber_condition").then(res => {
        console.log(res, "sss");
      });
    },
    // 下拉选择变了，重新渲染tree和下拉
    selectChange(){
      this.getAllSelectOrTree()
    },
    // 查询左侧维度
    queryDimDictType() {
      // 查询内置维度
      let data1 = { sourceType: "V" };
      publicManage_pub.caliberMemberQueryDimDictType(data1).then(res => {
        if (res.code == 200) {
          this.builtInList = res.data;
        }
      });
      // 查询自定义维度
      let data2 = { sourceType: "U" };
      publicManage_pub.caliberMemberQueryDimDictType(data2).then(res => {
        if (res.code == 200) {
          this.selfList = res.data;
        }
      });
    },
    getAllSelectOrTree() {
      for (let i = 0; i < this.dataList.length; i++) {
        this.getSelect(this.dataList[i].rullDictCode,i);
        this.getTreeList(this.dataList[i].rullAllVal,i);
      }
    },
    getTreeList(data,i) {
      let param = { dimTreetypeCode: data };
      publicManage_pub.caliberMemberDimTreenodeTree(param).then(res => {
        if (res.code == 200) {
          let tree = this.$listToTree(
            "dictItemCode",
            "parentItemCode",
            res.data
          );
          this.$set(this.treeAll, "tree" + data, tree);
          // this.dataList[i].rullVal = tree[0].dictItemCode;
          // this.dataList[i].rullValName = tree[0].dictItemName;
          // this.dataList[i].rullValTree = '1';

          console.log(this.treeAll, tree);
        }
      });
    },
    getSelect(data,i) {
      console.log(data, "rullDictCode");
      let sle = [];
      let param = { relatedDicttypeCode: data };
      publicManage_pub.caliberMemberFindDimTree(param).then(res => {
        if (res.code == 200) {
          sle = res.data;

          this.$set(this.selectAll, "list" + data, res.data);
          console.log(this.selectAll, res.data);
        }
      });
    },
    // 处理删除
    delDef(index, rows) {
      rows.splice(index, 1);
    },
    // 处理树选中事件
    checkFormOrg(val) {
      let node = this.$refs["saveTree"][val].getCheckedNodes();
      this.$refs["saveTree"][val].dropDownVisible = false; // 隐藏模态框
      if(node[0]){
      this.dataList[val].rullValName = node[0].label||"";
      this.dataList[val].rullValTree = node[0].parent?"1":"2"
      }else{
      this.dataList[val].rullValName = "";
      this.dataList[val].rullValTree = "1";
      }
      
      console.log(node,"node")
    },
    addDef(item) {
      let param = { dictCode: item.id };
      publicManage_pub.caliberMemberQueryDictType(param).then(res => {
        if (res.code == 200) {
          let obj = res.data;
          obj.rullValTree = "1"
          this.dataList.push(obj);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-collapse-item div {
  cursor: pointer;
}
.leftDtf {
  height: 100%;
  padding: 0 15px;
  background: #F5F7FD;
}
.el-collapse-item div:hover {
  background-color: #d5dced;
}
.defHeader {
  // border: 1px solid #ccc;
  display: block;
  background: linear-gradient(360deg,#C8D7F4 0%,#DDE7FB 100%);
  font-weight: 600;
  color:#1A2228;
}
/deep/.el-collapse-item__header{
  background: linear-gradient(360deg,#C8D7F4 0%,#DDE7FB 100%);
  height: 40px;
  width: 100%;
  padding-left: 22px;
}
.left-item{
  height: 40px;
  background-color: #F5F7FD;
  line-height: 40px;
  padding-left: 22px;
  color:#1A2228;
  overflow: hidden;
  i{
    margin-right: 10px;
    color:rgb(118,154,255)
  }
}
._and {
  color:#769AFF;
}
.rightDtf .el-row {
  height: 40px;
  line-height: 40px;
}
.rightDtf .el-col {
  text-align: center;
}
.rightDtf .defBody {
  height: 390px;
  overflow: auto;
  margin-bottom: 20px;
  border-bottom: none;
  background: #F5F7FD;
}
.delRow {
  cursor: pointer;
  color: rgb(118,154,255);
  font-size: 16px;
}
.tip {
  color:#ED7048;
  position: absolute;
  bottom: 5px;
  left: 240px;
  z-index: 999;
  font-size: 14px;
}
// 不换行，多余省略
.longName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>